<template>
  <a-breadcrumb
    style="
      padding-left: 15px;
      font-size: 18px;
      font-weight: bold;
      margin-top: 15px;
    "
  >
    <a-breadcrumb-item style="">安全管理</a-breadcrumb-item>
    <a-breadcrumb-item style="color: rgba(0, 191, 255)"
      >分店经理管理</a-breadcrumb-item
    >
  </a-breadcrumb>

  <a-button
    type="primary"
    @click="openAdd"
    ghost
    style="margin: -30px 20px 10px 10px; font-size: 20px; float: right"
    >新建</a-button
  >
  <a-button
    type="primary"
    @click="showDrawer"
    style="margin: -30px 20px 10px 10px; font-size: 20px; float: right"
  >
    查询
  </a-button>

  <a-table
    :dataSource="page.list"
    :columns="columns"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <!-- 插入名称为id的插槽 -->
    <template #id="{ text }"> {{ text }} </template>

    <!-- 插入名称为unit的插槽 -->
    <template #action="{ record }">
      <a-button type="primary" @click="openUpd(record)">修改</a-button>
      <a-divider type="vertical" />
      <a-button type="danger" @click="managerDel(record.st_id)">删除</a-button>
    </template>
  </a-table>

  <!--新增窗口 -->
  <a-modal v-model:visible="visible" title="新建经理信息" @ok="managerAdd">
    <a-form
      :model="addObj"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="经理编号">
        <a-input v-model:value="addObj.st_id" />
      </a-form-item>

      <a-form-item label="经理姓名">
        <a-input v-model:value="addObj.st_name" />
      </a-form-item>

      <a-form-item label="经理电话">
        <a-input v-model:value="addObj.st_tel" />
      </a-form-item>

      <a-form-item label="经理性别">
        <a-radio-group v-model:value="addObj.st_sex">
          <a-radio :value="true">男</a-radio>
          <a-radio :value="false">女</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="经理生日">
        <a-space direction="vertical">
          <a-date-picker v-model:value="addObj.st_birth" />
        </a-space>
      </a-form-item>
      <a-form-item label="经理月薪">
        <a-input v-model:value="addObj.st_salary" />
      </a-form-item>
      <a-form-item label="经理电话">
        <a-input v-model:value="addObj.st_tel" />
      </a-form-item>
      <a-form-item label="经理住址">
        <a-input v-model:value="addObj.st_address" />
      </a-form-item>
      <a-form-item label="备注">
        <a-textarea v-model:value="addObj.st_remark" :rows="3" />
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 14, offset: 4 }"> </a-form-item>
    </a-form>
  </a-modal>

  <!--修改窗口 -->
  <a-modal v-model:visible="visible2" title="修改经理信息" @ok="managerUpd">
    <a-form
      :model="updObj"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="经理编号">
        <a-input v-model:value="updObj.st_id" disabled />
      </a-form-item>

      <a-form-item label="经理姓名">
        <a-input v-model:value="updObj.st_name" />
      </a-form-item>

      <a-form-item label="经理电话">
        <a-input v-model:value="updObj.st_tel" />
      </a-form-item>

      <a-form-item label="经理性别">
        <a-radio-group v-model:value="updObj.st_sex">
          <a-radio :value="true">男</a-radio>
          <a-radio :value="false">女</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="经理生日">
        <a-space direction="vertical">
          <a-date-picker v-model:value="updObj.st_birth" />
        </a-space>
      </a-form-item>
      <a-form-item label="经理月薪">
        <a-input v-model:value="updObj.st_salary" />
      </a-form-item>
      <a-form-item label="经理状态">
        <a-input v-model:value="updObj.st_state" />
      </a-form-item>
      <a-form-item label="经理住址">
        <a-input v-model:value="updObj.st_address" />
      </a-form-item>
      <a-form-item label="备注">
        <a-textarea v-model:value="updObj.st_remark" :rows="3" />
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 14, offset: 4 }"> </a-form-item>
    </a-form>
  </a-modal>

  <!-- 查询弹窗 -->
  <a-drawer
    title="查询经理信息"
    :width="720"
    :visible="visible3"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
  >
    <a-form :model="query" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="经理编号">
            <a-input v-model:value="query.st_id" placeholder="请输入经理编号" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="经理姓名">
            <a-input
              v-model:value="query.st_name"
              placeholder="请输入经理姓名"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="经理电话">
            <a-input
              v-model:value="query.st_tel"
              placeholder="请输入经理电话"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button type="primary" @click="purchQuery">查询</a-button>
    </div>
  </a-drawer>
</template>
<script setup>
//引入ref函数，用于构造单向绑定数据
import { ref, reactive, computed } from "vue";

//引入useRouter函数，用于获取路由器对象
import { useRouter } from "vue-router";

//引入函数，用于向服务端发送get请求
import { get, put, del, post, getBlob, tip, removeLocalToken } from "@/common";

const columns = [
  {
    dataIndex: "st_id", //服务端数据
    title: "经理编号", //表头项名称
    align: "center",
  },
  {
    dataIndex: "st_name",
    title: "经理姓名",
    align: "center",
  },
  {
    dataIndex: "st_birth",
    title: "经理生日",
    align: "center",
    slots: {
      customRender: "date",
    },
  },
  {
    dataIndex: "st_tel",
    title: "经理电话",
    align: "center",
  },

  {
    key: "action",
    title: "操作",
    slots: {
      customRender: "action",
    },
  },
];

//分页处理-start
const query = reactive({}); //定义查询参数

const page = ref({}); //接收服务端返回的分页对象

//分页引擎
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["5", "10", "20", "30"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;

  get("/security/manager", query).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;
  });
};
getPage(1); //页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};

//分页处理-end

//新增
const addObj = reactive({
  st_id: "",
  st_name: "",
  st_sex: "",
  st_birth: "",
  st_tel: "",
  st_address: "",
  st_state: "",
  st_remark: "",
  st_salary: "",
});
const visible = ref(false);
//打开窗口
const openAdd = () => {
  visible.value = true;
};
//执行新增
const managerAdd = () => {
  post("/security/manager", addObj).then((res) => {
    addObj.st_id = ""; //清空窗口数据
    addObj.st_name = ""; //清空窗口数据
    addObj.st_tel = ""; //清空窗口数据
    addObj.st_sex = ""; //清空窗口数据
    addObj.st_birth = ""; //清空窗口数据
    addObj.st_address = ""; //清空窗口数据
    addObj.st_state = ""; //清空窗口数据
    addObj.st_remark = ""; //清空窗口数据
    addObj.st_salary = ""; //清空窗口数据
    visible.value = false;
    tip.success("新增记录成功！");
    getPage(page.value.last + 1);
  });
};

//修改
const updObj = reactive({
  st_id: "",
  st_name: "",
  st_sex: "",
  st_birth: "",
  st_tel: "",
  st_address: "",
  st_state: "",
  st_remark: "",
  st_salary: "",
});
const visible2 = ref(false);
//打开窗口
const openUpd = (manager) => {
  updObj.st_id = manager.st_id;
  updObj.st_name = manager.st_name;
  updObj.st_tel = manager.st_tel;
  updObj.st_sex = manager.st_sex;
  updObj.st_birth = manager.st_birth;
  updObj.st_address = manager.st_address;
  updObj.st_state = manager.st_state;
  updObj.st_remark = manager.st_remark;
  updObj.st_salary = manager.st_salary;

  visible2.value = true;
};
//执行修改
const managerUpd = () => {
  put("/security/manager", updObj).then((res) => {
    updObj.st_id = ""; //清空窗口数据
    updObj.st_name = ""; //清空窗口数据
    updObj.st_tel = ""; //清空窗口数据
    updObj.st_sex = ""; //清空窗口数据
    updObj.st_birth = ""; //清空窗口数据
    updObj.st_address = ""; //清空窗口数据
    updObj.st_state = ""; //清空窗口数据
    updObj.st_remark = ""; //清空窗口数据
    updObj.st_salary = ""; //清空窗口数据

    visible2.value = false;
    tip.success("修改记录成功！");
    getPage(page.value.current);
  });
};

//删除
const managerDel = (st_id) => {
  del("/security/manager" + st_id).then((res) => {
    tip.success("删除记录成功！");
    getPage(page.value.current);
  });
};

//查询
const visible3 = ref(false);

const showDrawer = () => {
  visible3.value = true;
};

const onClose = () => {
  visible3.value = false;
};
//执行查询
const purchQuery = () => {
  // get("/security/manager", query).then((res) => {
  visible3.value = false;
  tip.success("查询完成！");
  getPage();

  query.st_id = ""; //清空窗口数据
  query.st_name = ""; //清空窗口数据
  query.st_tel = ""; //清空窗口数据

  // });
};
</script>

<style scoped>
</style>